<template>
  <div>
    <el-dialog :model-value="modelValue" :style="{ maxHeight: '80vh',overflowY:'auto' }" :title="t('创建流程')"
               width="800" @close="close">
      <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-position="top" label-width="auto">
        <el-form-item :label="t('名称')" prop="displayName">
          <el-input v-model="formData.displayName" :placeholder="t('请输入')" suffix-icon="EditPen" />
        </el-form-item>
        <el-form-item :label="t('备注')" prop="description">
          <el-input v-model="formData.description" :maxlength="250" :placeholder="t('请输入')" show-word-limit
                    type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="close">{{ t("取消") }}</el-button>
          <el-button type="primary" @click="submit(ruleFormRef)">{{ t("确定") }}</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { rules } from "./data";
import { ref } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import { useI18n } from "@/hooks/web/useI18n";
import { saveWorkFlow } from "@/api/WorkFlow";

const { t } = useI18n("lims");


const emit = defineEmits(["update:modelValue", "init"]);
const props: object = defineProps<{
  modelValue: boolean,
  formData: any
}>();

const close = (): void => {
  emit("update:modelValue", false);
};
const ruleFormRef = ref<FormInstance>();
const submit = async (formEl: FormInstance | undefined): Promise<void> => {
  if (!formEl) return;
  await formEl.validate(async (valid) => {
    if (valid) {
      const res = await saveWorkFlow({
        workflowDefinitionId: props.formData.definitionId,
        deleteCompletedInstances: false,
        description: props.formData.description,
        displayName: props.formData.displayName,
        isSingleton: false,
        persistenceBehavior: "WorkflowBurst",
        publish: false,
        ...props.formData
      });
      console.log(res);
      if (res.status == 200) {
        ElMessage({
          message: "操作成功",
          type: "success"
        });
        close();
        emit("init");
      } else {
        ElMessage.error("操作失败");
      }
    }
  });
};
</script>
